<template>
  <div>
    <div class="item mb_30">
      <span class="title f-15">活动开始时间：</span>
      <span class="content f-15">2023-06-23 14:31</span>
    </div>
    <div class="item mb_30">
      <span class="title f-15">活动结束时间：</span>
      <span class="content f-15">2023-06-26 14:31</span>
    </div>
    <div class="item mb_30">
      <span class="title f-15">活动名称：</span>
      <span class="content f-15">参与活动赢大奖</span>
    </div>
    <div class="item mb_30 c_cfcfcf">
      <span class="title f-15">活动派奖方式：</span>
      <span class="content f-15">抽奖派发</span>
    </div>
    <div class="mb_30 c_cfcfcf">
      发布后派奖方式、奖项类型和生成券号将不能修改。发布后，未发布时的测试数据会被清空
    </div>
    <div class="line mb_30"></div>
    <div class="buttons">
      <el-button type="primary" class="mlr_20" @click="sure"
        >确认发布</el-button
      >
      <el-button class="mlr_20" @click="cancel">取消</el-button>
    </div>

    <el-dialog
      class="innerdialog"
      width="900px"
      title="发布活动"
      :visible.sync="innerVisible"
      append-to-body
      :close-on-click-modal='false'
    >
      <el-row :gutter="10" class="mb_30">
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="flexcolumn aligncenter justifycenter imgbody">
            <div class="mb_15 c_606">微信扫一扫预览效果</div>
            <img src="@/assets/images/icon1.png" alt="" class="imgbox mb_15" />
            <el-button class="mb_30" @click="download(url1)"
              >下载二维码</el-button
            >
            <el-input placeholder="请输入内容" v-model="link1" readonly class="appendbg">
              <template slot="append">
                <span
                  class="commhover"
                  v-clipboard:copy="link1"
                  v-clipboard:success="clipboardSuccess"
                  >复制</span
                >
              </template>
            </el-input>
          </div>
        </el-col>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="flexcolumn aligncenter justifycenter imgbody">
            <div class="mb_15 c_999" style="height: 19px"></div>
            <img src="@/assets/images/icon1.png" alt="" class="imgbox mb_25" />
            <el-button class="mb_20" @click="download(url2)"
              >下载小程序</el-button
            >
            <el-input placeholder="请输入内容" v-model="link2" readonly class="appendbg">
              <template slot="append">
                <span
                  class="commhover"
                  v-clipboard:copy="link2"
                  v-clipboard:success="clipboardSuccess"
                  >复制</span
                >
              </template>
            </el-input>
          </div>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      innerVisible: false,
      link1: "http://localhost/action/aclist",
      link2: "http://localhost/action/aclist1",
      url1: "https://files.axshare.com/gsc/NBONXS/82/bb/b1/82bbb1f99b0443b2abd29d9dc7220e72/images/活动管理/二维码_u3097.png",
      url2: "",
    };
  },

  methods: {
    sure() {
      this.innerVisible = true;
    },

    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },

    download(link) {
      var a = document.createElement("a");
      a.setAttribute("href", link);
      a.click();
    },

    cancel(){
        this.$emit('close')
    }
  },
};
</script>

<style lang="scss" scoped>
.item {
  width: 100%;
}
.title {
  display: inline-block;
  width: 130px;
  color: #000;
}
.content {
  width: calc(100% - 120px);
  padding: 0 10px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #000;
}
.line {
  width: 100%;
  border-bottom: 1px dotted #eee;
}
.buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  // justify-content: space-around;
}
.imgbody {
  width: 260px;
  margin: auto;
}
.imgbox {
  width: 178px;
  height: 178px;
}
</style>
<style lang="scss">
.innerdialog {
  width: 100%;
  .el-dialog__header {
    text-align: center;
    .el-dialog__title{
      font-size: 22px;
      color: #000;
    } 
  }
}
.appendbg{
  .el-input-group__append{
    background-color: #4A73FF;
    color: white;
  }
}
</style>